<template>
  <el-dialog
    v-model="modelValue"
    :title="title"
    :width="width"
    :before-close="cancel"
  >
    <slot>{{data}}</slot>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">{{handle.cancel.label}}</el-button>
        <el-button type="primary" @click="confirm"
          >{{handle.submit.label}}</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
// import { ElMessageBox } from 'element-plus'

type HandleObject = {
  label: string,
  callback?: Function
}

type Handle = {
  cancel: HandleObject,
  submit: HandleObject
}

type Props = {
  data?: object,
  modelValue: boolean,
  title?: string,
  width?: string,
  handle?: Handle
}
const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  title: '',
  width: '50%',
  handle: ():Handle => {
    return {
      cancel: {
        label: '取消',
        // callback: () => {}
      },
      submit: {
        label: '确认',
        // callback: () => {}
      }
    }
  }
})

console.log(props)

const cancel = () => {
  emit('update:modelValue', false)
}

const close = () => {
  if (props.handle.cancel.callback) {
    props.handle.cancel.callback()
  } else {
    emit('cancel')
  }
  emit('update:modelValue', false)
}

const confirm = () => {
  console.log(props.handle.submit)
  if (props.handle.submit.callback) {
    props.handle.submit.callback()
  } else {
    emit('confirm')
  }
  // emit('update:modelValue', false)
}

// const handleClose = (done: () => void) => {
//   ElMessageBox.confirm('Are you sure to close this dialog?')
//     .then(() => {
//       done()
//     })
//     .catch(() => {
//       // catch error
//     })
// }
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
